<template>
  <!-- 根组件 -->
  <div id="login">
    <!-- x符号 -->
    <a class="cross" href="#" @click="huitui"><van-icon name="cross" /></a>
    <!-- taptaplogo -->
    <div class="login-tap">
      <img src="../assets/images/logintaptap.png" alt="" />
    </div>
    <!-- 输入框 -->
    <div class="input-box">
      <van-dropdown-menu width="82px" active-color="#13B9C7">
        <van-dropdown-item v-model="state.value1" :options="option1" />
      </van-dropdown-menu>
      <van-cell-group inset>
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field
          @input="gaibian"
          center
          v-model="tel"
          type="tel"
          placeholder="请输入手机号"
        />
      </van-cell-group>
    </div>
    <p class="tixing tixing1">{{ sjtixin }}</p>
    <div id="yanzm">
      <span>验证码</span
      ><input type="number" name="" id="" placeholder="请输入验证码" />
      <div class="button">
        <van-button size="small" type="primary" v-show="show" @click="hqyzm"
          >发送验证码</van-button
        >
        <van-button size="small" type="primary" v-show="!show" class="count"
          >{{ count }} s</van-button
        >
      </div>
    </div>

    <div class="check-center">未注册用户验证后将自动注册并登录</div>
    <!-- 登录按钮 -->
    <a href="#" v-if="shoujh === true && checked === true" @click="logind"
      ><div class="btn-login">登录</div></a
    >
    <div @click="logind" class="btn-login1" v-else>登录</div>
    <p v-if="checked === false" class="tixing">{{ tixin }}</p>
    <!-- 勾选内容 -->
    <div class="check-footer">
      <van-checkbox
        v-model="checked"
        shape="square"
        checked-color="#13B9C7"
        icon-size="12px"
        size="12px"
        >我已详细阅读并同意taptap<span class="xieyi">服务协议</span> 和
        <span class="xieyi">隐私协议</span></van-checkbox
      >
    </div>
    <!-- 老用户邮箱 -->
    <div class="old-eml">
      老用户邮箱登录<van-icon size="10px" name="arrow" />
    </div>
    <!-- 分享 -->
    <div class="share">
      <p class="share-p1">社交账号登录</p>
      <p class="share-p2">
        <a href=""
          ><img src="../assets/images/wx.png" alt="" />
          <p>微信</p></a
        >
        <a href=""
          ><img src="../assets/images/qq.png" alt="" />
          <p>QQ</p></a
        >
      </p>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { reactive, ref } from "vue";
export default {
  setup() {
    const state = reactive({
      value1: 0,
      tel: "",
    });
    const router = useRouter();
    let show = ref(true);
    let count = ref("");
    let timer = ref(null);

    let tixin = ref("");
    let sjtixin = ref("");
    let tel = ref("");
    const store = useStore();
    const huitui = () => {
      router.go(-1);
    };
    const option1 = [
      { text: "CN+86", value: 0 },
      { text: "HK+852", value: 1 },
      { text: "MO+853", value: 2 },
      { text: "TW+886", value: 3 },
    ];
    let checked = ref(false);
    let shoujh = ref(false);

    const logind = () => {
      if (checked.value === true) {
        store.commit("login/logind");
      } else {
        tixin.value = "请先进行勾选协议";
      }
    };
    const gaibian = () => {
      let re = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      if (tel.value.length === 11) {
        if (!re.test(tel.value)) {
          (sjtixin.value = "请输入正确手机号"), (shoujh.value = false);
        } else {
          (sjtixin.value = ""), (shoujh.value = true);
        }
      } else {
        (sjtixin.value = "手机号位数不够"), (shoujh.value = false);
      }
    };
    const hqyzm = () => {
      const TIME_COUNT = 60;
      if (shoujh.value === true) {
        if (!timer.value) {
          count.value = TIME_COUNT;
          show.value = false;
          timer.value = setInterval(() => {
            if (count.value > 0 && count.value <= TIME_COUNT) {
              count.value--;
            } else {
              show.value = true;
              clearInterval(timer.value);
              timer.value = null;
            }
          }, 1000);
        }
        fetch("http://www.pudge.wang:4000/register/getCode", {
          method: "POST",
          body: JSON.stringify({
            phone: tel.value,
            templateId: "537707",
          }),
          headers: new Headers({ "Content-Type": "application/json" }),
        })
          .then((response) => response.json())
          .then((res) => {
            if (res.status === "0") {
              console.log(res);
            }
          });
      } else {
        sjtixin.value = "手机号输入有误";
      }
    };
    return {
      huitui,
      count,
      timer,
      show,
      tel,
      shoujh,
      gaibian,
      logind,
      hqyzm,
      state,
      option1,
      checked,
      tixin,
      sjtixin,
    };
  },
};
</script>
<style lang="less">
#login {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 22px 17px;
  .van-button--primary {
    background-color: #13b9c7;
    border: #13b9c7;
  }
  .cross {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-top: 4px;
  }
  .login-tap {
    height: 43px;
    width: 100%;
    margin-top: 38px;
    text-align: center;
    margin-bottom: 50px;
    img {
      width: 145px;
      height: 100%;
    }
  }
  .input-box {
    padding: 10px, 13px;
    width: 296px;
    height: 48px;
    background: #f8f8f8;
    margin-left: 23px;
    position: relative;
    .van-cell-group {
      position: absolute;
      left: 74px;
      top: 15px;
      .van-cell {
        padding: 0;
        .van-field__body {
          background: #f8f8f8;
          i {
            background: #f8f8f8;
          }
        }
      }
    }
    .van-dropdown-menu {
      display: inline-block;
      width: 83px;
      margin-right: 12px;
      .van-dropdown-menu__bar {
        box-shadow: none;
      }
      .van-dropdown-menu__item {
        background: #f8f8f8;
      }
      .van-overlay {
        background-color: transparent;
      }
      .van-popup {
        width: 220px;
        margin-left: 23px;
      }
    }
    input {
      width: 175px;
      height: 21px;
      border: none;
      font-size: 18px;
      background: #f8f8f8;
      valid + .clear-input {
        display: block;
      }
    }
  }
  .check-center {
    font-size: 12px;
    margin-left: 28px;
    margin-top: 19px;
    color: #999999;
  }
  .btn-login {
    width: 300px;
    height: 45px;
    border-radius: 5px;
    background: #13b9c7;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #fff;
    margin-left: 21px;
    margin-top: 30px;
  }
  .btn-login1 {
    width: 300px;
    height: 45px;
    border-radius: 5px;
    background: #7c7c7c;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #fff;
    margin-left: 21px;
    margin-top: 30px;
  }
  .check-footer {
    margin-left: 22px;
    margin-top: 14px;
    font-size: 12px;
    .van-icon-success {
      position: relative;
      &::before {
        size: 12px;
        position: absolute;
        left: -1px;
        top: -2px;
      }
    }
    .van-checkbox__label {
      color: #666;
    }

    .xieyi {
      color: #000;
    }
  }
  .old-eml {
    margin-left: 110px;
    margin-top: 16px;
    font-size: 15px;
    color: #13b9c7;
    i {
      font-weight: 900;
    }
  }
  .share {
    width: 100%;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .share-p1 {
      font-size: 14px;
      position: absolute;
      bottom: 100px;
    }
    .share-p2 {
      position: absolute;
      bottom: 23px;
      width: 152px;
      height: 62px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      img {
        width: 42px;
        height: 42px;
      }
      p {
        font-size: 11px;
        text-align: center;
      }
    }
  }
}
.tixing {
  font-size: 12px;
  text-indent: 20px;
  line-height: 25px;
  color: #13b9c7;
}
.tixing1 {
  text-indent: 25px;
  color: red;
}
#yanzm {
  margin-top: 10px;
  display: flex;
  width: 295px;
  height: 30px;
  margin-left: 23px;
  justify-content: space-evenly;
  input {
    width: 90px;
    border: none;
    font-size: 14px;
  }
  span {
    font-size: 14px;
    align-self: center;
  }
  .button {
    align-self: center;
    display: flex;
  }
}
</style>
